<template>
  <div>
    <h1>编辑个人信息</h1>
    <el-form ref="form" :model="form" label-width="70px" style="width: 500px;margin: auto;">
            <el-form-item label="姓名" style="width: 500px;">
                <el-input v-model="form.hname" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别" style="width: 500px;">
              <el-radio-group v-model="form.hgender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
        
            <div class="demo-type">
                <el-form-item label="头像">
                <el-avatar shape="circle" :size="100">
                    <img :src="form.headImage" alt="图片不存在" />
                </el-avatar>
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="http://localhost:8000/file-serv/upload"
                    name="files"
                    :on-success="handleSuccess"
                    :file-list="fileList"
                    :auto-upload="true"
                    :headers="headrs"
                >
                <el-button slot="trigger" size="small" type="primary"><i class="el-icon-upload el-icon--right" @click="aa">选取文件</i></el-button>
                </el-upload>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>

        </el-form>



  </div>
</template>

<script>
import {loadHospitalMangerInfo,updHospMangerInfos} from '@/api/hospitalMangerInfo';
export default {
  data(){
      return{
        form:{},
        headrs:{
            "Authorization":sessionStorage.getItem("token")
        }
      }

      },
      mounted(){
        this.loadHospitalMangerInfos();
      },
      methods:{
        loadHospitalMangerInfos(){
          loadHospitalMangerInfo().then(res=>{
            if(res.data.code==200){
              this.form =res.data.data
            }
          })
        },
        aa(){
           //点击保存的时候会执行此函数，该函数会将前端文件传递给服务器，促使服务器完成文件上传
           this.$refs.upload.submit();
        },
        handleSuccess(data){//代表响应回来的文件的url
                this.form.headImage=data;//将url设置到form中
                //向服务器发请求，将包含了url和修改后的信息的用户对象传递给服务器，服务器进行数据库保存
                
            },
        onSubmit(){
            updHospMangerInfos(this.form).then(res=>{
                if(res.data.code==200){
                    this.$message({
                        type:"success",
                        message:"修改成功"
                    })
                    this.loadHospitalMangerInfos();
                }
            })
        }
      }
}
</script>

<style>

</style>